<template>
	<view class="uiwu uiwu-ios">
		<swiper class="uiwu-swiper">
			<swiper-item>
				<image src="/static/taskbg.png" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="uiwu-tab uiwu-flex-align">
			<view class="item" :class="activeIndex == 1 ? 'active' : ''" @tap.stop="swiperTap(1)">
				<text class="uiwu-flex-center">每日任务</text>
				<text></text>
			</view>
			<view class="item" :class="activeIndex == 2 ? 'active' : ''" @tap.stop="swiperTap(2)">
				<text class="uiwu-flex-center">成长任务</text>
				<text></text>
			</view>
		</view>
		<view class="uiwu-list">
			<view class="item uiwu-flex-space" v-for="(item,index) in listData" :key="index">
				<view class="left uiwu-flex-column">
					<text>{{item.name}}</text>
					<text>奖励{{item.reward}}零食币</text>
				</view>
				<view class="right" :class="item.is_finish == 1 ? 'active' : ''">{{item.is_finish == 1 ? '已完成' : "未完成"}}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { ref } from "vue";
	import { tasklist } from "@/api/api";
	import { uiwu } from "@/config/config";
	const activeIndex = ref<number>(1)
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const swiperTap = (index:number) => {
		activeIndex.value = index
		listData.value = []
		gettasklist()
	}
	const gettasklist = async (mack:boolean = false) => {
		if(!mack) pageNum.value = 1
		const { data:{data},total } = await tasklist({
			task_type:activeIndex.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	onReachBottom(()=>{
		if(!isLock.value) return
		isLock.value = false
		pageNum.value++
		tasklist(true)
	})
	onLoad(()=>{
		gettasklist()
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu-swiper{
		width: 100%;
		height: 300rpx;
		image{
			width: 100%;
		}
	}
	.uiwu-tab{
		padding: 30rpx 24rpx;
		.item{
			width: 172rpx;
			position: relative;
			margin-right: 30rpx;
			height: 56rpx;
			text{
				width: 172rpx;
				height: 56rpx;
				background: #F1F1F1;
				border-radius: 100rpx;
				border: 3rpx solid #231815;
				left: -3rpx;
				top: -4px;
				z-index: 6;
				position: absolute;
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
				&:nth-child(2){
					z-index: 5;
					left: 3rpx;
					top: 4rpx;
					background: #FFFFFF;
				}
			}
			&.active{
				text{
					background: #EF821E;
					color: #FFFFFF;
					&:nth-child(2){
						background: #FAC500;
					}
				}
			}
			
		}
	}
	.uiwu-list{
		background-color: #fff;
		padding:0 24rpx;
		
		.item{
			padding: 24rpx;
			border-bottom: 1rpx solid #e6e6e6;
			.left{
				text{
					font-size: 28rpx;
					font-weight: 800;
					color: #231815;
					&:nth-child(2){
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.right{
				font-size: 28rpx;
				font-weight: 500;
				color: #EF821E;
				&.active{
					color: #666666;
				}
			}
		}
	}
</style>
